<template>
	<view class="wrapper">
		<view class="tx_num">兑换算力</view>
		<view class="inp_num">
			<input type="text" v-model="money" class="number" placeholder="请输入数量,燃烧挖矿(1:3)" placeholder-class="f26 c999"/>
			<text>BIM</text>
		</view>
		<view class="total_box">
			<view class="total">可用：</view>
			<view class="total_num">
				{{ balance | toTwo(4) }}
				
				<text>BIM</text>
			</view>
		</view>
		<button type="default" class="wpay wadh" @tap="showPay = true">确定</button>
		<alert :alertTitle="'请输入支付密码'" :showInput="true" v-if="showPay" @alertConfirm="alertConfirm"></alert>
	</view>
</template>

<script>
import md5 from '@/common/md5.min.js';
import alert from '@/components/alert/alert.vue';
export default {
	data() {
		return {
			balance: 0,
			money: '',
			showPay: false
		};
	},
	onLoad(e) {
		this.balance = e.balance;
	},
	methods: {
		alertConfirm(type, payPassword) {
			if (this.money <= 0) {
				this.$sToast('划转金额错误');
				this.showPay = false;
				return;
			}
			if (type == 1) {
				this.poolRecharge(payPassword) 
			}
			this.showPay = false;
		},
		poolRecharge(payPassword) {
			let time = parseInt(new Date().getTime() / 1000),
				userid = uni.getStorageSync('userinfo').userId,
				token = uni.getStorageSync('userinfo').access_token;
			this.$ajax(
				'skTransfer/poolRecharge',
				{
					money: this.money,
					secret: md5(md5(this.apikey + time + this.money) + userid + token + md5(payPassword))
				},
				'POST'
			).then(res => {
				this.$sToast('兑换成功');
				this.$back(1, 1500);
			});
		}
	}
};
</script>

<style lang="scss">
.wrapper {
	background: rgba(242, 243, 245, 1);
	display: flex;
	flex-direction: column;
}

.tx_num {
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	margin: 31rpx 0 20rpx 30rpx;
}

.inp_num {
	height: 104rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1rpx solid rgba(224, 224, 224, 1);
	padding-left: 30rpx;
	input{
		flex: 1;
	}
}

.inp_num text {
	font-size: 30rpx;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	margin-left: 30rpx;
	margin-right: 10rpx;
}

.total_box {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 30rpx 20rpx 27rpx 30rpx;
}

.total_box .total {
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	margin-right: 20rpx;
}

.total_num {
	font-size: 30rpx;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	text{
		padding-left: 6rpx;
	}
}

.wadh {
	width: 690rpx;
	height: 80rpx;
	background: rgba(2, 151, 254, 1);
	border-radius: 8rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
	margin-left: 30rpx;
}
.wpay {
	margin-bottom: 20rpx;
}
.tips {
	font-size: 26rpx;

	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	margin: 29rpx 0 0 30rpx;
}
</style>
